import React from 'react';

interface ModalProps {
  width?: number;
  title?: string;
  isOpen: boolean;
  onClose: () => void;
  children?: React.ReactNode
}

const Modal: React.FC<ModalProps> = ({ isOpen, onClose, children, width=800, title='提示' }) => {
//   const [modalOpen, setModalOpen] = useState(isOpen);

  const handleClose = () => {
    // setModalOpen(false);
    onClose();
  };

  return (
    <>
      {isOpen && (
        <div className="fixed inset-0 z-10 flex items-center justify-center overflow-x-hidden overflow-y-auto outline-none">
          <div className="fixed inset-0 transition-opacity" aria-hidden="true">
            <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
          </div>
          <div className="relative z-10 w-auto mx-auto bg-white rounded-lg shadow-lg">
            <div className="w-full h-12 border-x-gray-400 border-b-2">
                <h3 className="text-gray-700 text-lg h-full leading-12 pl-4 flex items-center">{title}</h3>
            <button
              onClick={handleClose}
              className="absolute top-0 right-0 m-4 text-gray-500 hover:text-gray-700 hover:scale-125  focus:outline-none"
            >
              <svg
                className="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d="M6 18L18 6M6 6l12 12"
                ></path>
              </svg>
            </button></div>
            <div style={{width}}>{children}</div>
           
          </div>
        </div>
      )}
    </>
  );
};

export default Modal;
